<script setup lang="ts">
  import {
    useGetReturnFactoryModuleConnectCustomFieldList,
    useConnectFieldListDel,
  } from '@/services/pages/return-factory/useModule'
  import CustomFieldConnectModal from './CustomFieldConnectModal.vue'
  import { ref } from 'vue'
  import { ElMessageBox, TableInstance } from 'element-plus'
  import infoTip from '@/config/info-tip'
  import { HMessage, HMessageBox } from '@/components/common/message'

  const { total, list, loading, getListParam, getList } =
    useGetReturnFactoryModuleConnectCustomFieldList()
  const { del } = useConnectFieldListDel()

  defineOptions({
    name: 'TableReturnFactoryModuleDetailCustomFiledConnect',
  })

  const props = defineProps({
    moduleId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'select-connect-field', value: Array<string>): void
  }>()

  const curentEditingFieldId = ref('')
  const customFieldConnectModalVisible = ref(false)
  const selectedFieldIds = ref<Array<string>>([])
  const tableInstance = ref<TableInstance | null>(null)

  const handleEdit = (fieldId: string) => {
    customFieldConnectModalVisible.value = true
    curentEditingFieldId.value = fieldId
  }

  const handleDel = (field: ReturnFactoryModuleCustomFieldConnect) => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection()
      tableInstance.value.toggleRowSelection(field, true)

      ElMessageBox({
        title: '提示',
        message: infoTip.returnFactory.moduleConnectCustomField.del_one,
        type: 'error',
        showCancelButton: true,
        async beforeClose(action, instance, done) {
          if (['close', 'cancel'].includes(action)) {
            done()
            return
          }

          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await del(selectedFieldIds.value)
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            if (res.code === 20000) {
              HMessage.success(infoTip.returnFactory.moduleConnectCustomField.del_success)
              getList(props.moduleId)
              done()
              return
            }

            HMessageBox.error(res.message)
          }
        },
      })
    }
  }

  const handleSelectField = (fieldList: Array<ReturnFactoryModuleCustomFieldConnect>) => {
    selectedFieldIds.value = fieldList.map((item) => item.id)
    emits('select-connect-field', selectedFieldIds.value)
  }

  defineExpose({
    getList: (param: { limit: number; page: number }) => {
      getListParam.value = param
      getList(props.moduleId)
    },
    total,
  })
</script>

<template>
  <div class="custom-field-connect">
    <el-table
      :border="true"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectField"
      ref="tableInstance"
      height="100%"
    >
      <!-- 选择 -->
      <el-table-column type="selection" fixed="left" :align="'center'" width="50"></el-table-column>

      <!-- 序号 -->
      <el-table-column
        type="index"
        fixed="left"
        :align="'center'"
        label="序号"
        width="50"
      ></el-table-column>

      <!-- 关联字段名 -->
      <el-table-column
        label="关联字段名"
        prop="name"
        show-overflow-tooltip
        min-width="200"
      ></el-table-column>

      <!-- 移动端是否显示 -->
      <el-table-column label="移动端是否显示" width="120" prop="mobileShow">
        <template #default="{ row }">
          {{ row.mobileShow ? '显示' : '隐藏' }}
        </template>
      </el-table-column>

      <!-- 是否必填 -->
      <el-table-column label="是否必填" width="100" prop="required">
        <template #default="{ row }">
          {{ row.required ? '必填' : '不必填' }}
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column label="创建时间" width="140" prop="createTime"></el-table-column>

      <!-- 更新时间 -->
      <el-table-column label="更新时间" width="140" prop="updateTime"></el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <h-space>
            <h-link @click="handleEdit(row.id)">编辑</h-link>
            <h-link type="error" @click="handleDel(row)">删除</h-link>
          </h-space>
        </template>
      </el-table-column>
    </el-table>

    <custom-field-connect-modal
      :module-id="props.moduleId"
      :connect-field-id="curentEditingFieldId"
      v-model:visible="customFieldConnectModalVisible"
      @update="getList(props.moduleId)"
    ></custom-field-connect-modal>
  </div>
</template>

<style scoped lang="scss">
  .custom-field-connect {
    height: 100%;
  }
</style>
